<!-- 修改后的index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>农产品价格分析系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'SimHei', sans-serif;
            background-color: #f8f9fa;
            padding-top: 20px;
            padding-bottom: 50px;
        }
        .card {
            margin-bottom: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .card-header {
            background-color: #2c3e50;
            color: white;
            font-weight: bold;
        }
        .tab-content {
            padding: 20px;
            border: 1px solid #dee2e6;
            border-top: none;
            border-radius: 0 0 10px 10px;
            background-color: white;
        }
        .nav-tabs .nav-link {
            color: #2c3e50;
            font-weight: bold;
        }
        .nav-tabs .nav-link.active {
            background-color: #2c3e50;
            color: white;
            border-color: #2c3e50;
        }
        .chart-container {
            height: 450px;
            margin: 20px 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .chart-container img {
            max-height: 100%;
            max-width: 100%;
            object-fit: contain;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .sub-chart-container {
            height: 300px;
            margin: 20px 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .sub-chart-container img {
            max-height: 100%;
            max-width: 100%;
            object-fit: contain;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .table-container {
            max-height: 350px;
            overflow-y: auto;
            border: 1px solid #dee2e6;
            border-radius: 6px;
        }
        .info-box {
            background-color: #e8f4f8;
            border-left: 4px solid #3498db;
            padding: 15px 20px;
            margin-bottom: 25px;
            border-radius: 4px;
        }
        .change-positive {
            color: #28a745;
            font-weight: bold;
        }
        .change-negative {
            color: #dc3545;
            font-weight: bold;
        }
        .loading-spinner {
            display: inline-block;
            width: 1.5rem;
            height: 1.5rem;
            vertical-align: text-bottom;
            border: 0.25em solid currentColor;
            border-right-color: transparent;
            border-radius: 50%;
            animation: spinner-border 0.75s linear infinite;
        }
        @keyframes spinner-border {
            to {
                transform: rotate(360deg);
            }
        }
        .btn-loading {
            pointer-events: none;
            opacity: 0.7;
        }
        .table-hover tbody tr:hover {
            background-color: rgba(0, 123, 255, 0.075);
        }
        /* 响应式调整 */
        @media (max-width: 768px) {
            .chart-container {
                height: 300px;
            }
            .sub-chart-container {
                height: 250px;
            }
            .nav-tabs .nav-link {
                font-size: 0.9rem;
                padding: 0.5rem 0.75rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="text-center mb-4">
            <h1 class="display-4">农产品价格分析系统</h1>
            <p class="lead">基于新发地市场数据的实时价格监测与分析</p>
            <div class="d-flex justify-content-center mb-4">
                <div class="badge bg-primary text-white px-3 py-1 rounded-pill">
                    <i class="fa fa-refresh mr-1"></i> 数据更新时间: <span id="updateTime">加载中...</span>
                </div>
            </div>
        </div>

        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
                <button class="nav-link active" id="daily-tab" data-bs-toggle="tab" data-bs-target="#daily" type="button" role="tab">
                    <i class="fa fa-line-chart mr-1"></i> 每日价格涨跌
                </button>
            </li>
            <li class="nav-item">
                <button class="nav-link" id="trend-tab" data-bs-toggle="tab" data-bs-target="#trend" type="button" role="tab">
                    <i class="fa fa-area-chart mr-1"></i> 类别价格趋势
                </button>
            </li>
            <li class="nav-item">
                <button class="nav-link" id="query-tab" data-bs-toggle="tab" data-bs-target="#query" type="button" role="tab">
                    <i class="fa fa-search mr-1"></i> 分类地区查询
                </button>
            </li>
        </ul>

        <div class="tab-content" id="myTabContent">
            <!-- 每日价格涨跌面板 -->
            <div class="tab-pane fade show active" id="daily" role="tabpanel">
                <div class="info-box">
                    <p>
                        <i class="fa fa-info-circle mr-2"></i>本模块展示各品类农产品当日价格相较于前一日的涨跌情况，
                        <span class="change-positive">绿色</span>表示上涨，<span class="change-negative">红色</span>表示下跌。
                        点击日期可查询历史数据，支持按类别排序比较。
                    </p>
                </div>

                <div class="row mb-3">
                    <div class="col-md-4">
                        <label for="datePicker" class="form-label">选择查询日期：</label>
                        <input type="date" class="form-control" id="datePicker" value="{{ today }}">
                    </div>
                    <div class="col-md-2 align-self-end">
                        <button class="btn btn-primary btn-block" id="dailyQueryBtn" onclick="loadDailyData()">
                            <i class="fa fa-search mr-1"></i> 查询数据
                        </button>
                    </div>
                </div>

                <!-- 新增特定蔬菜图表容器 -->
                <div class="sub-chart-container" id="vegetableChartContainer">
                    <div class="text-center text-muted">
                        <i class="fa fa-spinner fa-spin fa-3x mb-2"></i>
                        <p>正在加载蔬菜数据...</p>
                    </div>
                </div>

                <div class="chart-container" id="dailyChartContainer">
                    <div class="text-center text-muted">
                        <i class="fa fa-spinner fa-spin fa-3x mb-2"></i>
                        <p>正在加载数据...</p>
                    </div>
                </div>

                <h5 class="mt-4">
                    <i class="fa fa-table mr-2"></i>详细数据
                    <span class="text-muted small">(点击表头可排序)</span>
                </h5>
                <div class="table-container">
                    <table class="table table-striped table-hover" id="dailyTable">
                        <thead class="bg-light">
                            <tr>
                                <th scope="col" onclick="sortTable(0, 'dailyTable')">商品类别 <i class="fa fa-sort ml-1"></i></th>
                                <th scope="col" onclick="sortTable(1, 'dailyTable')">当日均价 (元) <i class="fa fa-sort ml-1"></i></th>
                                <th scope="col" onclick="sortTable(2, 'dailyTable')">前日均价 (元) <i class="fa fa-sort ml-1"></i></th>
                                <th scope="col" onclick="sortTable(3, 'dailyTable')">涨跌幅度 <i class="fa fa-sort ml-1"></i></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="text-center">
                                <td colspan="4">
                                    <div class="py-3">
                                        <i class="fa fa-spinner fa-spin mr-2"></i>
                                        数据加载中，请稍候...
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 类别价格趋势面板 -->
            <div class="tab-pane fade" id="trend" role="tabpanel">
                <div class="info-box">
                    <p>
                        <i class="fa fa-info-circle mr-2"></i>选择商品类别和时间范围，查看该类别农产品价格随时间的变化趋势。
                        折线图上的圆点为每日平均价格，可分析周期性波动规律，支持最长30天的数据查询。
                    </p>
                </div>

                <div class="row mb-3">
                    <div class="col-md-3">
                        <label for="categorySelect" class="form-label">商品类别：</label>
                        <select class="form-select" id="categorySelect">
                            <option value="蔬菜">蔬菜</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="startDate" class="form-label">起始日期：</label>
                        <input type="date" class="form-control" id="startDate" value="{{ last_week }}">
                    </div>
                    <div class="col-md-3">
                        <label for="endDate" class="form-label">结束日期：</label>
                        <input type="date" class="form-control" id="endDate" value="{{ today }}">
                    </div>
                    <div class="col-md-3 align-self-end">
                        <button class="btn btn-primary btn-block" id="trendQueryBtn" onclick="loadTrendData()">
                            <i class="fa fa-search mr-1"></i> 查询趋势
                        </button>
                    </div>
                </div>

                <div class="chart-container" id="trendChartContainer">
                    <div class="text-center text-muted">
                        <i class="fa fa-spinner fa-spin fa-3x mb-2"></i>
                        <p>请选择条件并点击查询</p>
                    </div>
                </div>

                <h5 class="mt-4">
                    <i class="fa fa-table mr-2"></i>详细数据
                </h5>
                <div class="table-container">
                    <table class="table table-striped table-hover" id="trendTable">
                        <thead class="bg-light">
                            <tr>
                                <th scope="col">日期</th>
                                <th scope="col">平均价格 (元)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="text-center">
                                <td colspan="2">
                                    <div class="py-3">
                                        请选择查询条件并点击"查询趋势"按钮
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 分类查询面板 -->
            <div class="tab-pane fade" id="query" role="tabpanel">
                <div class="info-box">
                    <p>
                        <i class="fa fa-info-circle mr-2"></i>本模块支持按商品类别和地区组合查询农产品价格数据，
                        通过热力图直观展示不同产品价格分布，帮助您获取更细粒度的市场洞察。
                    </p>
                </div>

                <div class="row mb-3">
                    <div class="col-md-3">
                        <label for="queryCategory" class="form-label">商品类别：</label>
                        <select class="form-select" id="queryCategory">
                            <option value="蔬菜">蔬菜</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="regionInput" class="form-label">地区筛选：</label>
                        <input type="text" class="form-control" id="regionInput" placeholder="例如: 山东">
                    </div>
                    <div class="col-md-3">
                        <label for="queryStartDate" class="form-label">起始日期：</label>
                        <input type="date" class="form-control" id="queryStartDate" value="{{ last_week }}">
                    </div>
                    <div class="col-md-3">
                        <label for="queryEndDate" class="form-label">结束日期：</label>
                        <input type="date" class="form-control" id="queryEndDate" value="{{ today }}">
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-12 text-end">
                        <button class="btn btn-primary" id="queryBtn" onclick="loadQueryData()">
                            <i class="fa fa-search mr-1"></i> 执行查询
                        </button>
                    </div>
                </div>

                <div class="chart-container" id="queryChartContainer">
                    <div class="text-center text-muted">
                        <i class="fa fa-search fa-3x mb-2"></i>
                        <p>请设置查询条件并点击"执行查询"按钮</p>
                    </div>
                </div>

                <h5 class="mt-4">
                    <i class="fa fa-table mr-2"></i>详细数据
                </h5>
                <div class="table-container">
                    <table class="table table-striped table-hover" id="queryTable">
                        <thead class="bg-light">
                            <tr>
                                <th scope="col">日期</th>
                                <th scope="col">产品名称</th>
                                <th scope="col">地区</th>
                                <th scope="col">平均价格 (元)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="text-center">
                                <td colspan="4">
                                    <div class="py-3">
                                        请设置查询条件并点击"执行查询"按钮
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <footer class="mt-5 text-center text-muted">
            <p>© 2025 农产品价格分析系统 | 数据来源：新发地市场监测中心</p>
            <p class="small">本系统仅供参考，实际交易价格以市场为准</p>
        </footer>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 设置默认日期
        const today = new Date().toISOString().split('T')[0];
        const lastWeek = new Date();
        lastWeek.setDate(lastWeek.getDate() - 7);
        const lastWeekFormatted = lastWeek.toISOString().split('T')[0];

        // 设置日期选择器的默认值
        document.getElementById('datePicker').value = today;
        document.getElementById('startDate').value = lastWeekFormatted;
        document.getElementById('endDate').value = today;
        document.getElementById('queryStartDate').value = lastWeekFormatted;
        document.getElementById('queryEndDate').value = today;

        // 更新数据时间显示
        document.getElementById('updateTime').textContent = new Date().toLocaleString();

        // 页面加载时自动加载数据
        window.onload = function() {
            loadDailyData();
        };

        // 表格排序函数
        function sortTable(columnIndex, tableId) {
            const table = document.getElementById(tableId);
            const tbody = table.querySelector('tbody');
            const rowsArray = Array.from(tbody.rows);
            const currentTh = table.querySelector(`thead th:nth-child(${columnIndex + 1})`);

            // 检查当前列是否已经有排序图标
            const hasSortIcon = currentTh.innerHTML.includes('fa-sort-');
            let sortDirection = 'asc';

            if (hasSortIcon) {
                // 如果已经有排序图标，切换排序方向
                sortDirection = currentTh.innerHTML.includes('fa-sort-asc') ? 'desc' : 'asc';
            }

            // 移除所有列的排序图标
            table.querySelectorAll('thead th').forEach(th => {
                th.innerHTML = th.innerHTML.replace(/<i class="fa fa-sort(-(asc|desc))? ml-1"><\/i>/, '');
                th.innerHTML += '<i class="fa fa-sort ml-1"></i>';
            });

            // 添加当前列的排序图标
            currentTh.innerHTML = currentTh.innerHTML.replace(/<i class="fa fa-sort ml-1"><\/i>/, '');
            currentTh.innerHTML += `<i class="fa fa-sort-${sortDirection} ml-1"></i>`;

            // 排序行
            rowsArray.sort((rowA, rowB) => {
                const cellA = rowA.cells[columnIndex].textContent.trim();
                const cellB = rowB.cells[columnIndex].textContent.trim();

                // 处理数字排序
                if (!isNaN(parseFloat(cellA)) && !isNaN(parseFloat(cellB))) {
                    return sortDirection === 'asc'
                        ? parseFloat(cellA) - parseFloat(cellB)
                        : parseFloat(cellB) - parseFloat(cellA);
                }

                // 处理字符串排序
                return sortDirection === 'asc'
                    ? cellA.localeCompare(cellB)
                    : cellB.localeCompare(cellA);
            });

            // 重新插入排序后的行
            tbody.innerHTML = '';
            rowsArray.forEach(row => tbody.appendChild(row));
        }

        // 加载每日价格变化数据
        function loadDailyData() {
            const date = document.getElementById('datePicker').value;
            const btn = document.getElementById('dailyQueryBtn');

            // 显示加载状态
            btn.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i> 查询中...';
            btn.classList.add('btn-loading');

            document.getElementById('dailyChartContainer').innerHTML = `
                <div class="text-center text-muted">
                    <i class="fa fa-spinner fa-spin fa-3x mb-2"></i>
                    <p>正在加载数据...</p>
                </div>
            `;

            document.getElementById('vegetableChartContainer').innerHTML = `
                <div class="text-center text-muted">
                    <i class="fa fa-spinner fa-spin fa-3x mb-2"></i>
                    <p>正在加载蔬菜数据...</p>
                </div>
            `;

            document.getElementById('dailyTable').querySelector('tbody').innerHTML = `
                <tr class="text-center">
                    <td colspan="4">
                        <div class="py-3">
                            <i class="fa fa-spinner fa-spin mr-2"></i>
                            数据加载中，请稍候...
                        </div>
                    </td>
                </tr>
            `;

            fetch(`/daily_price_change?date=${date}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP错误，状态码: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.success) {
                        // 更新数据时间
                        document.getElementById('updateTime').textContent = new Date().toLocaleString();

                        // 显示主图表
                        document.getElementById('dailyChartContainer').innerHTML = `
                            <img id="dailyChart" src="data:image/png;base64,${data.chart}" class="img-fluid rounded-3" alt="每日价格涨跌趋势图">
                        `;

                        // 显示蔬菜图表
                        document.getElementById('vegetableChartContainer').innerHTML = `
                            <img id="vegetableChart" src="data:image/png;base64,${data.vegetable_chart}" class="img-fluid rounded-3" alt="特定蔬菜价格涨跌图">
                        `;

                        // 填充表格数据
                        const tableBody = document.getElementById('dailyTable').querySelector('tbody');
                        tableBody.innerHTML = '';

                        data.table.forEach(item => {
                            const changeClass = item.change >= 0 ? 'change-positive' : 'change-negative';
                            const changeSymbol = item.change >= 0 ? '+' : '';
                            const changeIcon = item.change >= 0
                                ? '<i class="fa fa-arrow-up ml-1"></i>'
                                : '<i class="fa fa-arrow-down ml-1"></i>';

                            const row = `
                                <tr>
                                    <td>${item.category}</td>
                                    <td>${item.current_price.toFixed(2)}</td>
                                    <td>${item.prev_price.toFixed(2)}</td>
                                    <td class="${changeClass}">${changeSymbol}${item.change.toFixed(2)}% ${changeIcon}</td>
                                </tr>
                            `;
                            tableBody.innerHTML += row;
                        });
                    } else {
                        showError('daily', data.error);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showError('daily', `请求失败: ${error.message}`);
                })
                .finally(() => {
                    // 恢复按钮状态
                    btn.innerHTML = '<i class="fa fa-search mr-1"></i> 查询数据';
                    btn.classList.remove('btn-loading');
                });
        }

        // 加载类别价格趋势数据
        function loadTrendData() {
            const category = document.getElementById('categorySelect').value;
            const startDate = document.getElementById('startDate').value;
            const endDate = document.getElementById('endDate').value;
            const btn = document.getElementById('trendQueryBtn');


            // 验证日期范围
            if (new Date(startDate) > new Date(endDate)) {
                alert('起始日期不能晚于结束日期');
                return;
            }

            // 验证日期跨度不超过30天
            const dateDiff = Math.abs(new Date(endDate) - new Date(startDate)) / (1000 * 60 * 60 * 24);
            if (dateDiff > 30) {
                alert('请选择不超过30天的日期范围');
                return;
            }

            // 显示加载状态
            btn.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i> 加载中...';
            btn.classList.add('btn-loading');

            document.getElementById('trendChartContainer').innerHTML = `
                <div class="text-center text-muted">
                    <i class="fa fa-spinner fa-spin fa-3x mb-2"></i>
                    <p>正在生成趋势图...</p>
                </div>
            `;

            document.getElementById('trendTable').querySelector('tbody').innerHTML = `
                <tr class="text-center">
                    <td colspan="2">
                        <div class="py-3">
                            <i class="fa fa-spinner fa-spin mr-2"></i>
                            数据加载中，请稍候...
                        </div>
                    </td>
                </tr>
            `;

            fetch(`/category_price_trend?category=${category}&start_date=${startDate}&end_date=${endDate}`)
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP错误，状态码: ${response.status}`);
            }
            return response.json();
                })
                .then(data => {
                    if (data.success) {
                        // 更新数据时间
                        document.getElementById('updateTime').textContent = new Date().toLocaleString();

                        // 显示图表
                        document.getElementById('trendChartContainer').innerHTML = `
                            <img id="trendChart" src="data:image/png;base64,${data.chart}" class="img-fluid rounded-3" alt="${data.category}价格趋势图">
                        `;

                        // 填充表格数据
                        const tableBody = document.getElementById('trendTable').querySelector('tbody');
                        tableBody.innerHTML = '';

                        data.table.forEach(item => {
                            const row = `
                                <tr>
                                    <td>${item.date}</td>
                                    <td>${item.price.toFixed(2)}</td>
                                </tr>
                            `;
                            tableBody.innerHTML += row;
                        });
                    } else {
                        showError('trend', data.error);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showError('trend', `请求失败: ${error.message}`);
                })
                .finally(() => {
                    // 恢复按钮状态
                    btn.innerHTML = '<i class="fa fa-search mr-1"></i> 查询趋势';
                    btn.classList.remove('btn-loading');
                });
        }

        // 加载分类查询数据
        function loadQueryData() {
            const category = document.getElementById('queryCategory').value;
            const region = document.getElementById('regionInput').value;
            const startDate = document.getElementById('queryStartDate').value;
            const endDate = document.getElementById('queryEndDate').value;
            const btn = document.getElementById('queryBtn');

            // 验证日期范围
            if (new Date(startDate) > new Date(endDate)) {
                alert('起始日期不能晚于结束日期');
                return;
            }

            // 显示加载状态
            btn.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i> 查询中...';
            btn.classList.add('btn-loading');

            document.getElementById('queryChartContainer').innerHTML = `
                <div class="text-center text-muted">
                    <i class="fa fa-spinner fa-spin fa-3x mb-2"></i>
                    <p>正在处理数据...</p>
                </div>
            `;

            document.getElementById('queryTable').querySelector('tbody').innerHTML = `
                <tr class="text-center">
                    <td colspan="4">
                        <div class="py-3">
                            <i class="fa fa-spinner fa-spin mr-2"></i>
                            数据加载中，请稍候...
                        </div>
                    </td>
                </tr>
            `;

            fetch(`/category_region_query?category=${category}&region=${region}&start_date=${startDate}&end_date=${endDate}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP错误，状态码: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.success) {
                        // 更新数据时间
                        document.getElementById('updateTime').textContent = new Date().toLocaleString();

                        // 显示热力图
                        document.getElementById('queryChartContainer').innerHTML = `
                            <img id="heatmapChart" src="data:image/png;base64,${data.heatmap}" class="img-fluid rounded-3" alt="价格热力图">
                        `;

                        // 填充表格数据
                        const tableBody = document.getElementById('queryTable').querySelector('tbody');
                        tableBody.innerHTML = '';

                        data.table.forEach(item => {
                            const row = `
                                <tr>
                                    <td>${item.date}</td>
                                    <td>${item.product}</td>
                                    <td>${item.region}</td>
                                    <td>${item.price.toFixed(2)}</td>
                                </tr>
                            `;
                            tableBody.innerHTML += row;
                        });
                    } else {
                        showError('query', data.error);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showError('query', `请求失败: ${error.message}`);
                })
                .finally(() => {
                    // 恢复按钮状态
                    btn.innerHTML = '<i class="fa fa-search mr-1"></i> 执行查询';
                    btn.classList.remove('btn-loading');
                });
        }

        // 显示错误信息
        function showError(tabId, message) {
            const chartContainer = document.getElementById(`${tabId}ChartContainer`);
            chartContainer.innerHTML = `
                <div class="text-center text-danger">
                    <i class="fa fa-exclamation-triangle fa-3x mb-2"></i>
                    <p>${message}</p>
                </div>
            `;

            // 同时更新蔬菜图表容器的错误信息
            if (tabId === 'daily') {
                document.getElementById('vegetableChartContainer').innerHTML = `
                    <div class="text-center text-danger">
                        <i class="fa fa-exclamation-triangle fa-3x mb-2"></i>
                        <p>${message}</p>
                    </div>
                `;
            }

            const tableBody = document.getElementById(`${tabId}Table`).querySelector('tbody');
            tableBody.innerHTML = `
                <tr class="text-center text-danger">
                    <td colspan="${tabId === 'trend' ? 2 : 4}">
                        <div class="py-3">
                            <i class="fa fa-exclamation-triangle mr-2"></i>
                            ${message}
                        </div>
                    </td>
                </tr>
            `;
        }
    </script>
</body>
</html>